<!--
 * @author: 十一
 * @since: 2024-06-16
 * index.vue
 * @desc: new page
-->
<template>
  <el-row :gutter="15">
    <el-col :span="18">
      <el-card>
        <h2 class="mt-5 mb-5 font-medium text-xl">首先感谢关注自由极客</h2>
        <p class="mt-5 mb-5 leading-7">
          我们的目标是为广大用户提供便捷、实用的免费资源，帮助您节省时间，提高工作效率！由于每年都需要支付不少的网站服务器、域名、CDN维护等各种费用，为了维持网站的正常运营，希望得到大家的支持。
        </p>
        <p class="mt-5 mb-5 leading-7">
          本站为非盈利性站点，仅仅作为用户喜欢本站捐赠打赏，本站不贩卖软件，所有内容不作为商业行为。
        </p>
        <h2 class="mt-20 mb-5 font-medium text-xl">赞助打赏</h2>
        <p class="mt-5 mb-5 leading-7">
          如果您觉得自由极客帮助了您，那么可以打赏一下，请编辑部吃个小零食、喝一杯咖啡或赞助网站维护费用，不定时进行动态调整!
        </p>
        <el-row>
          <el-col :span="8">
            <div class="flex justify-center items-center flex-col">
              <img src="../../static/image/5.jpg" alt="" />
              <h4 class="text-base">请小编吃零食</h4>
              <h4 class="text-sm">￥: 5.00</h4>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex justify-center items-center flex-col">
              <img src="../../static/image/15.jpg" alt="" />
              <h4 class="text-base">请小编喝咖啡</h4>
              <h4 class="text-sm">￥: 15.00</h4>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex justify-center items-center flex-col">
              <img src="../../static/image/50.jpg" alt="" />
              <h4 class="text-base">赞助维护费用</h4>
              <h4 class="text-sm">￥: 50.00</h4>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <h2 class="mt-5 mb-5 font-medium text-xl">站点收录说明</h2>
        <p class="leading-8">
          欢迎小伙伴们在分享和提交本站点未收录的网站，本站只收录优质优质网站，不收录镜像站、不收录套壳站、不收录小程序、不收录AI课程、不收录垃圾网站！该表仅作为提交申请，并不保证一定收录。
        </p>
      </el-card>
      <el-card
        class="mt-5 text-center cursor-pointer"
        @mouseover="handleMouseover"
        @mouseout="handleMouseout"
        :class="{ 'hover-class': isHovering }"
      >
        提交站点
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { fa, tr } from 'element-plus/es/locale/index.mjs';

definePageMeta({
  title: "赞助",
});
const isHovering = ref(false);
const handleMouseover = () => {
  isHovering.value = true
};
const handleMouseout = () => {
  isHovering.value = false
};
</script>

<style scoped lang="scss">
p {
  color: #4c4c4c;
}
.hover-class {
  box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
}
</style>
